<template>
  <div class="recent-views-page">
    <header-nav />
    
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>您的账户</el-breadcrumb-item>
        <el-breadcrumb-item>最近查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main-content">
      <!-- 统一导航菜单 -->
      <user-nav-menu active-menu="recent" />

      <div class="recent-views-container">
        <h1>最近查看</h1>
        
        <div v-if="loading" class="loading">
          <el-skeleton :rows="3" animated />
        </div>
        
        <div v-else-if="recentViews.length === 0" class="empty-recent">
          <el-empty description="暂无浏览记录">
            <el-button type="primary" @click="$router.push('/')">
              去购物
            </el-button>
          </el-empty>
        </div>
        
        <div v-else class="products-grid">
          <product-card 
            v-for="product in processedRecentViews" 
            :key="product.id"
            :product="product"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import HeaderNav from '../components/HeaderNav.vue'
import UserNavMenu from '../components/UserNavMenu.vue'
import ProductCard from '../components/ProductCard.vue'
import axios from '../utils/axios'
import { ElMessage } from 'element-plus'

const loading = ref(true)
const recentViews = ref([])
const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:5000'

const fetchRecentViews = async () => {
  try {
    loading.value = true
    const { data } = await axios.get('/api/user/recent-views')
    recentViews.value = data
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('获取浏览记录失败')
  } finally {
    loading.value = false
  }
}

const processedRecentViews = computed(() => {
  return recentViews.value.map(item => ({
    ...item,
    image: formatImageUrl(item.image)
  }))
})

// 添加一个辅助函数来正确格式化图片URL
const formatImageUrl = (imageUrl) => {
  if (!imageUrl) return '';
  
  // 如果已经是完整URL，直接返回
  if (imageUrl.startsWith('http')) return imageUrl;
  
  // 如果已经包含 /uploads/ 前缀，则直接添加基础URL
  if (imageUrl.startsWith('/uploads/')) {
    return `${baseURL}${imageUrl}`;
  }
  
  // 否则添加 /uploads/ 前缀
  return `${baseURL}/uploads/${imageUrl}`;
};

onMounted(() => {
  fetchRecentViews()
})
</script>

<style scoped>
.recent-views-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.breadcrumb {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.recent-views-container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.empty-recent {
  text-align: center;
  padding: 60px 0;
}

/* 添加图标样式 */
:deep(.el-menu-item) {
  display: flex;
  align-items: center;
}

:deep(.el-menu-item .el-icon) {
  margin-right: 5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .nav-menu {
    overflow-x: auto;
  }
  
  :deep(.el-menu--horizontal) {
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  
  :deep(.el-menu-item) {
    padding: 0 15px;
  }
}
</style> 